<template>
 <div>
   <el-row>
     <el-col :span="24">
       <div class="header">
         <label for="assistant" style="font-weight: 600; line-height: 40px;margin-right:5px">条件搜索</label>
       </div>
       <div class="header" style="width:110px;">
         <el-select v-model="form.train_year" placeholder="培训年份" clearable filterable>
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.year"
              :value="item.year">
              </el-option>
          </el-select>
         <!-- <el-cascader
          style="width: 88%;"
          placeholder="培训年份"
          v-model="form.train_year"
          :options="options1"
          :props="props1"
          @change="searchTrainYear"
          clearable
          filterable>
          </el-cascader> -->
        </div>
        <div class="header" style="width:130px">
          <el-input v-model="form.train_name" auto-complete="off" placeholder="输入培训名称" clearable></el-input>
        </div>
        <div class="header" style="width:150px">
          <el-select v-if="userInfo.username ==='jiaoyuting'|| userInfo.username ==='admin'" v-model="form.sch_name" placeholder="选择或输入学校" filterable  clearable>
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.sch_name"
              :value="item.sch_name">
            </el-option>
          </el-select> 
        </div>
        <div class="header" style="width:130px">
          <el-select v-if="this.userInfo.level === 3 || this.userInfo.level === 9" v-model="form.sch_address" placeholder="学校所在市" @change="searchAddress" clearable filterable>
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.sch_address"
              :value="item.sch_address">
              </el-option>
          </el-select>
        </div>
        <div class="header" style="width:120px">
          <el-select v-model="form.politics" placeholder="政治面貌" style="width: 100%;" filterable  clearable>
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.politics"
              :value="item.politics">
            </el-option>
          </el-select>     
        </div>
        <div class="header" style="width:120px">
          <el-select v-model="form.nation" clearable placeholder="选择民族" style="width: 100%;">
          <el-option
            v-for="item in nations"
            :key="item.value"
            :label="item.label"
            :value="item.label">
          </el-option>
          </el-select>     
        </div>
        <div class="header" style="width:120px">
          <el-input v-model="form.name" auto-complete="off" placeholder="输入姓名" filterable></el-input>
        </div>
        <div class="header" style="width:120px">
          <el-select v-model="form.sex" clearable placeholder="选择性别" style="width: 100%;">
          <el-option
            v-for="item in sexs"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
          </el-select>     
        </div>
        <div class="header">
          <el-button class="btn" type="primary" :loading="loading" icon="el-icon-search" @click="getTableData()" circle></el-button>
          <el-button type="success" icon="el-icon-download" @click="exportExcel" circle></el-button>
        </div>
     </el-col>
   </el-row>
   <el-row style="border-top: 1px solid black; margin-top: 15px">
      <el-table
        v-loading="loading"
        @row-click="openDetails"
        :data="showTable"
        id="table"
        style="width: 100%;margin-bottom: 10px">
        <el-table-column
        prop="id"
        label="id"
        width="140">
      </el-table-column>
      <el-table-column
        label="姓名"
        prop="name"
        width="180">
      </el-table-column>
      <el-table-column
        label="性别"
        prop="sex"
        width="160">
      </el-table-column>
      <el-table-column
        label="出生年月"
        sortable
        prop="birth"
        width="170">
      </el-table-column>
      <el-table-column
        label="民族"
        prop="nation"
        width="170">
      </el-table-column>
      <el-table-column
        label="政治面貌"
        prop="politics"
        width="200">
      </el-table-column>
      <el-table-column
        label="所在院校"
        prop="sch"
        width="240">
      </el-table-column>
      <el-table-column
        label="院校所在市"
        prop="sch_address"
        width="200">
      </el-table-column>
      <el-table-column
        label="专业技术职务"
        prop="majoroccupation"
        width="220">
      </el-table-column>
     </el-table>
   </el-row>
   <el-pagination
   layout="prev, pager, next"
   @current-change="handleCurrentChange"
   :pagesize="10"
   class="pull-right" background
    :total="total"> 
  </el-pagination>
 </div>
</template>

<script>
import http from '../../../../src/assets/js/http'
// import FileSaver from "file-saver"
// import XLSX from "xlsx"
export default {
  data () {
    return {
      userInfo: Lockr.get('userInfo'),
      schInfo: Lockr.get('schInfo'),
      allPage: 1,
      nowPage: 1,
      sexs: [{
        value: '1',
        label: '男'
      },{
        value: '2',
        label: '女'
      }],
      // sexList: [
      // 1:{
      //   id: 1,
      //   sex: '男'
      // },
      // 2:{
      //    id: 2,
      //   sex: '女'
      // }],
      nations: [{
        value: '1',
        label: '汉族'
      },{
        value: '2',
        label: '其他民族'
      }],
      form: {
        train_year: '',
        train_name: '',
        sch_name: '',
        sch_address: '',
        name: '',
        sex: '',
        politics: '',
        nation: '',
      },
      // props1: {
      //   value: 'year_id',
      //   label: 'year'
      // },
      options1: [],
      options2: [],
      options3: [],
      options4: Lockr.get('schsInfo'),
      tableData: [],  //分页前的数据
      loading: true,
      currentPage: 1,
      total: 1,
      pagesize:10
    }
  },
  methods: {
    // showSch(row) {
    //   return Lockr.get('schInfo')['sch_id_' + row.sch]['sch_name']
    // },
    init() {
      // console.log(this.userInfo)
     // console.log(this.options4)
      this.getCascader()
    },
    // 性别1男2女
    sexShow(row) {
      let sex = row.sex==1?"男":"女"
      return sex
    },
    // 获得级联或者选择器
    getCascader() {
      let data = {}
      this.apiPost('admin/Train/TeacherYear', data).then((res) => {
        this.handelResponse(res, (data) => {
          // console.log(res.data)
          this.options1 = data.year
          this.options2 = data.sch_address
          this.options3 = data.politics
        })
      })
    },

    //获取数据填充表格
    getTableData() {
      let data = {
        traindata_year: this.form.train_year,
        traindata_name: this.form.train_name,
        sch: this.userInfo.sch,
        sch_name: this.form.sch_name,
        sch_address: this.form.sch_address,
        name: this.form.name,
        sex: this.form.sex,
        politics: this.form.politics,
        nation: this.form.nation,
        check:1,
        level_1: this.userInfo.level_1   //未定
      }
       // console.log(this.sexs[1].label)
      this.apiPost('admin/Train/TeacherQuerylist', data).then((res) => {
        this.handelResponse(res, (data) => {
           console.log(res.data)
          this.tableData = []
          data.forEach(element =>{
            if(element.sex === 1) {
              element.sex = "男"
            } else if (element.sex === 2) {
              element.sex = "女"
            }
            this.tableData.push({
              id: element.id,
             name: element.name,
            //  sex: this.sexs[Number(element.sex) - 1].label,
            sex:element.sex,
             birth: element.birth,
             degree: element.degree,
             edu: element.edu,
             majoroccupation: element.majoroccupation,
             nation: element.nation,
             politics: element.politics,
             sch: this.schInfo['sch_id_' + element.sch]['sch_name'],
             sch_address: element.sch_address
            })
          })
          // this.tableData = res.data
          this.total = this.tableData.length
          this.loading = false
        })
      })
    },
    // 点击单行触发事件查看辅导员单个详细信息，跳转后的界面通过this.$route.query.id取传输参数
    openDetails(row) {
      // console.log(row)
      this.$router.push({
        path: '../user/load',
        query: {
          item: row.id
        }
      })
    },
    // 导出表格
    exportExcel() {
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel} = require('../../../excel2/export2Excel') 
        const tHeader = [ '编号', '姓名', '性别', '出生年月', '民族', '政治面貌', '所在院校', '院校所在市', '专业技术职务']
        const filterVal = ['id','name', 'sex', 'birth', 'nation', 'politics', 'sch', 'sch_address', 'majoroccupation']; // 导出的表头字段名，需要导出表格字段名
        const list = that.tableData;
        const data = that.formatJson(filterVal, list);
        // const multiHeader = [];
        // const multiHeader2 = [];
        // const merges = [];
        export_json_to_excel(tHeader, data, '辅导员信息表');// 导出的表格名称，根据需要自己命名
      })
    },
    formatJson(filterVal, jsonData) {
        // console.log(jsonData)
        return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 根据页面渲染数据
    handleSizeChange(size) {
      this.pagesize = size
      console.log(this.pagesize)
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)
    },
    searchTrainYear(val) {
      // console.log(val)
      this.search.year = val
      // 交互：根据val获得培训期数对应的学校sch(数组形式)
    },
    searchAddress() {},
  },
  created() {
    _g.closeGlobalLoading()
    this.init()
    this.getTableData()
  },
  computed: {
    showTable() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    }
  },
  components: {
  },
  mixins: [http]
}

</script>
<style scoped>
.header {
     float: left;
     margin-left: 10px;
}
.btn {
  margin-left: 10px;
  margin-top: -5px;
}
</style>
